<template>
  <div>
    <h3>侦听器的用法</h3>
    <input type="text" class="form-control" v-model.trim="info.username">
  </div>
</template>

<script>
import axios from 'axios'
export default {
name:'MyWatch',
data(){
    return{
        username:'',
        info:{
            username:'',
            age:20
        }
    }
},
watch:{
    // 常规的写法
//    async username(newval,oldval){
//         // console.log(newval,oldval);
//         const {data:res}= await axios.get('https://www.escook.cn/api/finduser/'+newval)
//         console.log(res);
//     }
   //通过对象的写法，并添加immediate项,监听的值不是对象中的数据
        // username:{
        //     async handler(newval,oldval){
        //         const {data:res}=await axios.get(`https://www.escook.cn/api/finduser/${newval}`)
        //         console.log(res);
        //     },
        //     immediate:true //表示页面加载时就调用这个侦听器

        // }
// 监听对象中的值
//     info:{
//         async handler(newval){
//             const {data:res}=await axios.get(`https://www.escook.cn/api/finduser/${newval.username}`)
            
//             console.log(res);
//          },
//         deep:true
// }
// 监听对象中的某一个值
'info.username':{
        async handler(newval){
            const {data:res}=await axios.get(`https://www.escook.cn/api/finduser/${newval}`)
            
            console.log(res);
         },
        deep:true
}
}
}
</script>

<style>

</style>